/**
 * Copyright 2025 Adobe. All rights reserved.
 * This file is licensed to you under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License. You may obtain a copy
 * of the License at http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software distributed under
 * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
 * OF ANY KIND, either express or implied. See the License for the specific language
 * governing permissions and limitations under the License.
 */

@media (forced-colors: active) {
    :host {
        --highcontrast-color-slider-border-color: CanvasText;
        --highcontrast-color-slider-border-color-disabled: GrayText;
        --highcontrast-color-slider-background-color-disabled: Canvas;
        forced-color-adjust: none;
    }
}

:host {
    --spectrum-color-slider-border-color-default: rgba(var(--spectrum-gray-900-rgb), var(--spectrum-color-slider-border-opacity));
    --mod-colorhandle-hitarea-border-radius: var(--mod-color-slider-handle-hitarea-border-radius, 0px);
    min-inline-size: var(--mod-color-slider-minimum-length, var(--spectrum-color-slider-minimum-length));
    inline-size: var(--mod-color-slider-length, var(--spectrum-color-slider-length));
    block-size: var(--mod-color-slider-control-track-width, var(--spectrum-color-control-track-width));
    -webkit-user-select: none;
    user-select: none;
    cursor: default;
    display: block;
    position: relative;
}

:host([focused]) {
    z-index: 2;
}

:host([disabled]) {
    pointer-events: none;
}

:host([disabled]) .gradient {
    display: none;
}

:host([vertical]) {
    min-block-size: var(--mod-color-slider-vertical-minimum-height, var(--mod-color-slider-minimum-length, var(--spectrum-color-slider-minimum-length)));
    block-size: var(--mod-color-slider-vertical-height, var(--mod-color-slider-length, var(--spectrum-color-slider-length)));
    min-inline-size: 0;
    inline-size: var(--mod-color-slider-vertical-control-track-width, var(--mod-color-slider-control-track-height, var(--spectrum-color-control-track-width)));
    display: inline-block;
}

:host([vertical]) .handle {
    inset-block-start: 0;
    inset-inline-start: 50%;
}

.handle {
    inset-block-start: 50%;
    inset-inline-start: 0;
}

.checkerboard {
    --spectrum-color-slider-border-color-local: var(--highcontrast-color-slider-border-color, var(--mod-color-slider-border-color, var(--spectrum-color-slider-border-color-default)));
}

.checkerboard:before {
    content: "";
    z-index: 1;
    box-shadow: inset 0 0 0 var(--mod-color-slider-border-width, var(--spectrum-color-slider-border-width)) var(--spectrum-color-slider-border-color-local);
    border-radius: var(--mod-color-slider-border-rounding, var(--spectrum-color-slider-border-rounding));
    position: absolute;
    inset: 0;
}

:host([disabled]) .checkerboard {
    --spectrum-color-slider-border-color-local: var(--highcontrast-color-slider-border-color-disabled, var(--mod-color-slider-border-color-disabled, var(--spectrum-disabled-background-color)));
    background: var(--highcontrast-color-slider-background-color-disabled, var(--mod-color-slider-background-color-disabled, var(--spectrum-disabled-background-color)));
}

.checkerboard,
.gradient {
    inline-size: 100%;
    block-size: 100%;
    border-radius: var(--mod-color-slider-border-rounding, var(--spectrum-color-slider-border-rounding));
}

.gradient:dir(rtl),
:host([dir="rtl"]) .gradient {
    transform: scaleX(-1);
}

.slider {
    opacity: 0;
    inline-size: 100%;
    block-size: 100%;
    z-index: 0;
    pointer-events: none;
    margin: 0;
    position: absolute;
    inset-block-start: 0;
    inset-inline-start: 0;
}
